<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皕鲜-商品分类</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <!-- jQuery WeUI -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body bgcolor="#f5f5f5">
    <div class="search-res-top">
        <!--顶部搜索-->
        <div class="weui-search-bar search-bar-wrap search-res-bar" id="searchBar" style="background-color: #00a0e8;">
            <div class="arrow-l"></div>
            <form class="weui-search-bar__form search-bar-form">
                <div class="weui-search-bar__box search-bar-container">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="输入商家、商品名称" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <!--<label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>-->
            </form>
        </div>
    </div>
    <!--content-->
    <div class="common-center twoClassify weui-tab">
        <!-- left side navbar -->
        <div class="classify-navbar-container">
            <div class="weui-navbar classify-navbar">
                <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
                    叶菜类
                </a>
                <a class="weui-navbar__item" href="#tab2">
                    根茎类
                </a>
                <a class="weui-navbar__item" href="#tab3">
                    茄瓜果类
                </a>
                <a class="weui-navbar__item" href="#tab4">
                    菌菇类
                </a>
                <a class="weui-navbar__item" href="#tab5">
                    花菜类
                </a>
                <a class="weui-navbar__item" href="#tab5">
                    花菜类
                </a>
                <a class="weui-navbar__item" href="#tab5">
                    花菜类
                </a>
                <a class="weui-navbar__item" href="#tab5">
                    花菜类
                </a>
            </div>
        </div>
        <!-- nav bar content -->
        <div class="weui-tab__bd classify-goods-container" style="padding-top: 0px;background-color: #fff;">
            <div class="classify-goods-wrap">
                <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                    <div class="classify-title fs-13">叶菜类</div>
                    <ul class="classify-goods-ul">
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                    </ul>
                </div>
                <div id="tab2" class="weui-tab__bd-item">
                <div class="classify-title fs-13">根茎类</div>
                <ul class="classify-goods-ul">
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                    <li>
                        <img src="../img/index/meat_pic.png" alt="">
                        <div>青菜</div>
                    </li>
                </ul>
            </div>
                <div id="tab3" class="weui-tab__bd-item">
                    <div class="classify-title fs-13">茄瓜果类</div>
                    <ul class="classify-goods-ul">
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                    </ul>
                </div>
                <div id="tab4" class="weui-tab__bd-item">
                    <div class="classify-title fs-13">菌菇类</div>
                    <ul class="classify-goods-ul">
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                    </ul>
                </div>
                <div id="tab5" class="weui-tab__bd-item">
                    <div class="classify-title fs-13">花菜类</div>
                    <ul class="classify-goods-ul">
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                        <li>
                            <img src="../img/index/meat_pic.png" alt="">
                            <div>青菜</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>
<!-- jQuery WeUI -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<!-- jQuery WeUI拓展插件需要的JS -->
<!--<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
<script>
        $('.goodshop-li-1 .goods-li-more').click(function () {
            $('.goodshop-li-1 .shop-goods-ul').css('height','auto');
            $(this).hide();
            $('.goodshop-li-1 .goods-li-nomore').show();
        });
        $('.goodshop-li-1 .goods-li-nomore').click(function () {
            $('.goodshop-li-1 .shop-goods-ul').css('height','180px');
            $(this).hide();
            $('.goodshop-li-1 .goods-li-more').show();
        });
</script>
</html>
